<template>
    <view class="course-record" v-if="courseId">
    	<view class="module-title" style="margin-top: 0;padding-top: 0;">
    		<text>课程名称</text>
    	</view>
    	<view class="select-module">
    	    <uni-combox
    			@changeItem="changeItem"
    			ref="combox"
    			class="select-filter"
    			:candidates="nameList"
    			placeholder="请选择"
    			:border="false"
    			v-model="cur_option"
    			@change="comboxChange"></uni-combox>
    		
    	</view>
		<view class="course-info">
			<view class="cou-item">
				<text class="module-name">课程模块</text>
				<text class="module-value">{{curriculumRecord.modName}}</text>
			</view>
			<view class="cou-item">
				<text class="module-name">课程种类</text>
				<text class="module-value">{{curriculumRecord.modNameZ}}</text>
			</view>
			<view class="cou-item">
				<text class="module-name">课程标签</text>
				<text class="module-value">{{curriculumRecord.labels}}</text>
			</view>
			<view class="cou-item">
				<text class="module-name">课程简介</text>
				<view class="module-value">
					<text>{{curriculumRecord.brief}}</text>
					<view v-if="curriculumRecord.picture">
						<image :src="api.xiaodeObsUrl+curriculumRecord.picture" mode="aspectFit"></image>
					</view>
				</view>
				
			</view>
		</view>
		<view class="module-title">
			<text>课程大纲</text>
		</view>
		<view class="chapter-box" :class="{'chapter-box-close': item.putAway}" v-for="(item, inx) in chapterList" :key="inx">
			<view class="chapter-title">
				<text>{{item.name}}</text>
				<image src="/static/campus/sq-zk.png" :style="{transform: `rotate(${item.putAway?'180deg':'0'})`}" mode="widthFix" @click="openBox(item)"></image>
			</view>
			<view v-for="(div, i) in item.divisionList" :key="i">
				<view class="class-hour">
					<view class="hour-title">
						<text>{{i+1}}{{div.name}}</text>
						<uni-icons @click="deleDivision(div, i, item.divisionList)" type="minus" color="#999"></uni-icons>
					</view>
					
					
					<view class="file-item" v-for="(file, fInx) in div.divisionFileList" :key="fInx">
						<view class="tag-name">
							<text class="tag" :class="{tag1: !file.is_video}">{{file.is_video?'视频':'文档'}}</text>
							<text>{{file.name}}</text>
						</view>
						<uni-icons @click="deleDivisionFile(file.id)" type="minus" color="#999"></uni-icons>
					</view>
					<view style="margin-top: 24rpx;">
						<upload-btn
							:icon-info="{width: '328rpx', height: '84rpx', id: div.id}"
							type="file"
							@selectFile="setDivisionId"
							@chooseFile="chooseFile"
						></upload-btn>
					</view>
				</view>
				
			</view>
			<view class="class-hour add-class-hour" v-if="chapterDivInfo.id==item.id">
				<input class="cou-name-input" :value="chapterDivInfo.name" @input="chapterDivInput"
				@blur="subAddDivision"
				placeholder-style="color:#999" placeholder="请填写课时名称" />
				<uni-icons type="minus" color="#999"></uni-icons>
			</view>
			<view class="add-course" @click="addChapterDiv(item.id)">
				<uni-icons type="plusempty"></uni-icons>
				<text>添加课时</text>
			</view>
		</view>
		<view class="chapter-box add-chapter-box" :class="{'chapter-box-close': item.putAway}" v-for="(item, inx) in addChapterList" :key="`add${inx}`">
			<view class="chapter-title">
				<input class="cou-name-input" :value="item.name" @input="val => {chapterInput(item, val)}" placeholder-style="color:#999" placeholder="请填写章节名称" />
				<image src="/static/campus/del.png" mode="widthFix" @click="deleChapter(inx)"></image>
			</view>
			<view v-for="(div, i) in item.togetherDivisionDTO" :key="`add${i}`">
				<view class="class-hour">
					<view class="add-class-hour">
						<input class="cou-name-input" :value="div.name" @input="(val)=>{divisionInput(div, val)}" placeholder-style="color:#999" maxlength="30" minlength="2" placeholder="请填写课时名称" />
						<uni-icons type="minus" color="#999" @click="deleDivision(item.togetherDivisionDTO, i)"></uni-icons>
					</view>
					
					<view class="file-item" v-for="(file, fInx) in div.togetherDivisionFileDTO" :key="`add${fInx}`">
						<view class="tag-name">
							<text class="tag" :class="{tag1: !file.is_video}">{{file.is_video?'视频':'文档'}}</text>
							<text>{{file.name}}</text>
						</view>
						<uni-icons @click="deleDivisionFile(file.id)" type="minus" color="#999"></uni-icons>
					</view>
					<view style="margin-top: 24rpx;">
						<upload-btn
							:icon-info="{width: '328rpx', height: '84rpx', id: div.id}"
							type="file"
							@selectFile="setDivisionId"
							@chooseFile="chooseFile"
						></upload-btn>
					</view>
				</view>
			</view>
			<view class="add-course" @click="addDivision(item.togetherDivisionDTO)">
				<uni-icons type="plusempty"></uni-icons>
				<text>添加课时</text>
			</view>
			<view class="submit-box">
				<view class="fixed-box">
					<text class="cancel">取消</text>
					<text class="submit" @click="addChapterDivisionFile(item)">提交</text>
				</view>
			</view>
		</view>
		<view class="add-chapter" @click="addChapter()">
			<text>添加章节</text>
		</view>
    </view>
	<view class="course-record no-record" v-else>
		<text>暂无开课记录</text>
	</view>
</template>
<script>
import uploadBtn from '../student/components/select-upload-file.vue'
export default {
	components: {
		uploadBtn
	},
    data() {
        return {
			cur_option: '',
			courseId: '',
			nameList: {},
			curriculumRecord: {},
			chapterList: [],
			divisionId: {},
			addChapterList: [], // 添加章节
			chapterDivInfo: {}, // 添加课时
        }
    },
	mounted(){
		this.getNameList();
	},
	methods: {
		changeItem(val){
			if(!val){
				this.$refs.combox.onBlur()
			}
		},
		comboxChange(id){
			this.courseId = id
			this.getCurriculumieord(id)
			this.getChapterDivision(id)
		},
		// 开课记录名称列表
		getNameList(){
			this.api.get('happy/curriculumRecordNameList').then(res=>{
				if(res.data.state!='ok') return
				let list = res.data.nameList
				for(let i=0; i<list.length; i++){
					let item = list[i]
					this.nameList[item.id] = item.name
				}
				let id = list[0]?list[0].id:''
				this.courseId = id
				if(id){
					this.cur_option = list[0].name
					this.getCurriculumieord(id)
					this.getChapterDivision(id)
				}
				
			})
		},
		// 开课记录
		getCurriculumieord(id){
			this.api.get('happy/curriculumRecord', {
				curriculumId: id
			}).then(res=>{
				if(res.data.state!='ok') return
				this.curriculumRecord = res.data.curriculum
			})
		},
		// 课程详情
		getChapterDivision(id){
			this.api.get('happy/getChapterDivision', {
				curriculumId: id
			}).then(res=>{
				if(res.data.state!='ok') return
				this.chapterList = res.data.chapterList
			})
		},
		openBox(item){
			let flag = !item.putAway
			this.$set(item, 'putAway', flag)
		},
		// 添加已有章节课时
		addChapterDiv(id){
			this.$set(this.chapterDivInfo, 'id', id)
			this.chapterDivInfo.name = ''
		},
		chapterDivInput(e){
			this.chapterDivInfo.name = e.detail.value
		},
		subAddDivision(){
			if(!this.chapterDivInfo.name) return
			this.api.post('happy/addDivision', {
				chapterId: this.chapterDivInfo.id,
				name: this.chapterDivInfo.name
			}).then(res=>{
				if(res.data.state!='ok') return
				this.utils.showToast('添加成功')
				this.chapterDivInfo = {}
				setTimeout(()=>{
					this.getChapterDivision(this.courseId)
				}, 1000)
			})
		},
		// 添加章节
		chapterInput(item, e){
			item.name = e.detail.value
		},
		addChapter(){
			this.addChapterList.push(
				{
					name: "", 
					putAway: false,
					togetherDivisionDTO:[{
						name:"",
						togetherDivisionFileDTO: []
					}]
				}
			)
		},
		// 提交章节和文件
		addChapterDivisionFile(item){
			if(!item.name){
				this.utils.showToast('章节名称不能为空')
				return
			}
			let divName = true
			for(let i=0; i<item.togetherDivisionDTO.length; i++){
				if(!item.togetherDivisionDTO[i].name){
					divName = false
					break;
				}
			}
			if(!divName){
				this.utils.showToast('课时名称不能为空')
				return 
			}
			this.api.post('happy/addChapterDivisionFile', {
				curriculumId: this.courseId,
				chapterDivisionFile: JSON.stringify([item])
			}).then(res=>{
				if(res.data.state!='ok') return
				this.utils.showToast('添加成功')
				this.getChapterDivision(this.courseId)
			})
		},
		// 删除章节
		deleChapter(i){
			this.addChapterList.splice(i, 1)
		},
		// 添加课时
		divisionInput(data, e){
			data.name = e.detail.value
		},
		addDivision(list){
			list.push({name: '', togetherDivisionFileDTO: []})
		},
		// 删除课时
		deleDivision(item, i, list){
			
			
			if(!item.id){
				item.splice(i, 1)
				return
			}
			this.api.post('happy/deleDivision', {
				divisionId: item.id
			}).then(res=>{
				if(res.data.state!='ok') return
				list.splice(i, 1)
			})
		},
		// 课时中添加文件
		addDivisionFile(fileId){
			this.api.post('happy/addDivisionFile', {
				divisionFileStr: fileId
			}).then(res=>{
				if(res.data.state!='ok') return
				this.getChapterDivision(this.courseId)
			})
		},
		// 删除课时文件
		deleDivisionFile(fileId){
			this.api.post('happy/deleDivisionFile', {
				divisionFileId: fileId
			}).then(res=>{
				if(res.data.state!='ok') return
				this.getChapterDivision(this.courseId)
			})
		},
		setDivisionId(id){
			this.divisionId = id
		},
		chooseFile(type, list, sendList){
			let obj = sendList[0]
			var types = ['avi', 'wmv', 'mpg', 'mpeg', 'mov', 'rm', 'ram', 'swf', 'mp4', 'mp3', 'wma', 'rmvb', 'flv', 'mkv']
            let fileStr = {
				divisionId: this.divisionId,
				name: obj.name,
				url: obj.path,
				size: obj.size,
				isVideo: types.indexOf(obj.type)!=-1?true:false
			}
			this.addDivisionFile(JSON.stringify([fileStr]))
		},
	}
}
</script>
<style lang="less" scoped>
	.course-record{
		
	}
	.no-record{
		display: flex;
		height: 100%;
		justify-content: center;
		align-items: center;
	}
	.cou-item{
	}
	.module-title{
		margin-top: 26rpx;
		font-size: 32rpx;
		line-height: 45rpx;
		padding: 24rpx 0;
		color: #262E3F;
	    font-weight: bold;
	}
	.select-module{
		padding: 4rpx 0;
		background-color: #F9F9F9;
		border-radius: 8rpx;
	}
	.course-info{
		margin-top: 50rpx;
	}
	.cou-item{
		display: flex;
		line-height: 38rpx;
		padding: 36rpx 0;
		position: relative;
		&::after{
			position: absolute;
			content: '';
			left: 50%;
			bottom: 0;
			width: 200%;
			height: 2rpx;
			background-color: #F0F0F0;
			transform: translateX(-50%) scale(0.5);
		}
	}
	.module-name{
		width: 168rpx;
		min-width: 168rpx;
		margin-right: 10rpx;
		color: #727D8B;
	}
	.module-value{
		color: #162641;
		font-size: 30rpx;
		image{
			margin-top: 24rpx;
			width: 430rpx;
			height: 212rpx;
		}
	}
	.chapter-box{
		background-color: #F9F9F9;
		padding: 24rpx 32rpx;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
	}
	.chapter-box-close{
		height: 92rpx;
		overflow: hidden;
		box-sizing: border-box;
	}
	.chapter-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		line-height: 42rpx;
		color: #333333;
		image{
			width: 14rpx;
			height: 10rpx;
			
		}
	}
	.class-hour{
		// display: flex;
		// justify-content: space-between;
		margin-top: 24rpx;
		margin-left: 22rpx;
		color: #333333;
	}

	.hour-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.file-item{
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.download{
			width: 24rpx;
			height: 21rpx;
		}
		
	}
	.tag-name{
		color: #666666;
		font-size: 24rpx;
		.tag{
			margin-right: 12rpx;
			padding: 0 8rpx;
			line-height: 30rpx;
			font-size: 22rpx;
			border: 1rpx solid #1677FF;
			color: #1677FF;
			border-radius: 8rpx;
		}
		.tag1{
			border-color: #FF6010;
			color: #FF6010;
		}
	}
	.add-class-hour{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	// 添加章节
	.add-chapter-box{
		.chapter-title{
			image{
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
	.add-course, .add-chapter{
		border: 1rpx solid #BFBFBF;
		
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 20rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}
	.add-course{
		margin: 40rpx auto;
		width: 280rpx;
	}
	.cou-name-input{
		width: 90%;
		font-size: 30rpx;
	}
	.submit-box{
		height: 152rpx;
		.fixed-box{
			
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
		}
		text{
			width: 276rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 20rpx;
		}
		.cancel{
			border: 1rpx solid #BFBFBF;
		}
		.submit{
			background-color: #28C2CD;
			color: #fff;
		}
	}
</style>